{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ly商城</title>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet" media="all">
</head>
<body>
<div style="width: 100%;margin: 0 auto">
    <!-- 查询-->
    <div class="layui-collapse" style="margin-bottom: 10px;">
        <div class="layui-colla-item">
            <div class="layui-colla-title">查询</div>
            <div class="layui-colla-content layui-show">
                <form class="layui-form" novalidate>
                    <div class="layui-form-item" style="display: flex">
                        {% csrf_token %}
                        {% for i in search %}
                            <div class="layui-inline">
                                <label class="layui-form-label w-auto">{{ i.label }}: </label>
                                <div class="layui-input-inline">
                                    {{ i }}
                                </div>
                            </div>
                        {% endfor %}


                        <div class="layui-inline" style="display: flex; flex: 1;justify-content:flex-end;">
                            <button class="layui-btn layui-btn-normal" lay-submit=""
                                    lay-filter="data-search-btn" id="search"><i class="layui-icon"></i>查 询
                            </button>
                            <button class="layui-btn layui-btn-primary"><i
                                    class="layui-icon layui-icon-refresh"></i> 重 置
                            </button>

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- table表格-->
    <div>
        <table class="layui-hide" id="negotiation_table" lay-filter="negotiation_table"></table>
    </div>


</div>


<script src="{% static 'layui/layui.js' %}"></script>
<!-- table的单元格中操作板块的编辑和删除-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </a>
    </div>
</script>

<!--  新增按钮-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add_negotiation" id="add_negotiation">
            <i class="layui-icon layui-icon-addition"></i>
            新增
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="crawl_negotiation" id="crawl_negotiation">
            爬取
        </button>
    </div>
</script>

<script>
    layui.use(function () {
        var $ = layui.$;
        // 创建渲染实例
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        // 渲染table
        table.render({
            elem: '#negotiation_table',
            url: "{% url 'manager:商品数据' %}",
            method: 'post',
            toolbar: '#toolbarDemo',
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100, 200, 500],
            even: true,
            skin: 'row',
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'index', fixed: 'left', width: 80, title: '序号', align: 'center', sort: true},
                {field: 'id', width: 80, title: 'ID', align: 'center', hide: true},
                {
                    field: 'name',
                    width: 100,
                    title: '商品名',
                    sort: true,
                    align: 'center',
                },
                {
                    field: 'images',
                    width: 100,
                    title: '商品图片',
                    sort: true,
                    templet: function (d) {
                        console.log('========', d.images); // 得到当前行数据

                        // 返回模板内容
                        return '<img src="' + d.images + '" width="50px" height="50px">'
                    },
                    align: 'center',
                },

                {
                    field: 'price',
                    width: 100,
                    title: '商品价格',
                    sort: true,
                    align: 'center',
                },
                {
                    field: 'rating',
                    width: 100,
                    title: '商品评分',
                    sort: true,
                    align: 'center',
                },
                {
                    field: 'category',
                    width: 100,
                    title: '商品类别',
                    sort: true,
                    align: 'center',
                },
                {
                    field: 'description',
                    width: 300,
                    title: '商品描述',
                    sort: true,
                    align: 'center',
                },
                {fixed: 'right', title: '操作', minWidth: 240, toolbar: '#barDemo', align: 'center'},
            ]],

            error: function (res, msg) {
                console.log(res, msg)
            }

        })

        // table的工具栏事件
        table.on('toolbar(negotiation_table)', function (obj) {
            switch (obj.event) {
                case 'add_negotiation':
                    layer.open({
                        type: 2,
                        title: '新增商品',
                        content: "{% url 'manager:商品add' %}",
                        area: ['800px', '600px'],
                        maxmin: true,
                        end: function () {
                            table.reload('negotiation_table');
                        }
                    })
                    break;
                case 'crawl_negotiation':
                    //给出提示，是否爬取
                    layer.prompt({
                        title: '请输入爬取数据的关键词',
                        formType: 0
                    }, function (value, index) {
                        $.ajax({
                            url: "{% url 'manager:商品爬取' %}",
                            type: "POST",
                            data: {
                                keyword: value,
                                csrfmiddlewaretoken: "{{ csrf_token }}"  // 必须携带Token
                            },
                            success: function (res) {
                                if (res === "爬取开始") {  // 匹配后端返回的内容
                                    layer.msg('爬取成功');
                                    setTimeout(() => location.reload(), 1500);  // 1.5秒后刷新
                                } else {
                                    layer.msg('未知响应：' + res);
                                }
                            },
                            error: function (xhr) {
                                layer.msg('请求失败：' + xhr.status + ' ' + xhr.statusText);
                            }
                        });
                        layer.close(index);
                    });

            }
        })

        // 触发单元格工具事件
        table.on('tool(negotiation_table)', function (obj) {
            var data = obj.data
            var negotiation_id = data.id
            if (obj.event === 'delete') {
                layer.confirm('确定删除: ' + data.name + ' 吗?', function (index) {
                    obj.del();
                    //向后端的发送删除指令
                    $.ajax({
                        url: "{% url 'manager:商品del' %} ",
                        type: "post",
                        data: {'id': negotiation_id},
                        success: function (res) {
                            if (res == 'ok') {
                                console.log(data.id + '删除成功')
                                layer.close(index);
                            }
                        }
                    })

                });
            } else if (obj.event === 'edit') {
                console.log(negotiation_id)
                layer.open({
                    type: 2,
                    title: '编辑商品',
                    content: "{% url 'manager:商品edit' %}?id=" + negotiation_id,
                    area: ['800px', '600px'],
                    maxmin: true,
                    end: function () {
                        table.reload('negotiation_table');
                    }
                })
            }
        })


        // 查询的搜索按钮
        form.on('submit(data-search-btn)', function (data) {
            field = data.field;

            var result = JSON.stringify(field);
            console.log(result)
            // 执行搜索重载
            table.reloadData('negotiation_table', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: {
                    searchParams: result
                }
            });

            return false; // 阻止默认 form 跳转
        });

    })


</script>


</body>
</html>








